<template>
  <div class="box" v-loading="loading">
    <!-- 标题 -->
    <div class="title">
      <div class="title_fan">
        <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      </div>
      <!-- 图片信息 -->
      <div class="title_cen">
        <div class="card_title">
          <img src="../../../../assets/static/recharge/q4.png" alt=""/>
          <div>{{ $t('Payment to') }}</div>
        </div>
        <!--  -->
        <div class="account">
          <input @input="mobileBeInput" @change="mobileChange" v-model="mobile">
          <img src="../../../../assets/static/addReceiverAccount/a2.png" alt="">
        </div>
        <!--  -->
        <div class="money account" style="justify-content: flex-start">{{ $t('金额') }}：
          <div>
            <input @input="moneyBeInput" v-model="form.money"/>
          </div>
        </div>
        <!--  -->
        <div class="title_input">
          <div class="card_title">
            <img src="../../../../assets/static/recharge/q4.png" alt=""/>
            <div>{{ $t('Notice') }}</div>
          </div>
        </div>
        <el-input
          type="textarea"
          :placeholder="$t('Enter Text Content')"
          maxlength="200"
          show-word-limit
          v-model="form.remark"
          :autosize="{ minRows: 3, maxRows: 8}"
        >
        </el-input>
      </div>
    </div>
    <!--  -->
    <div @click="openPayDialog" class="ensure">{{ $t('Confirm') }}</div>
    <!--     支付密码 弹窗-->
    <Dialog
      @opened="opened"
      width="100vw"
      custom-class="payDialog"
      :visiable="payDialogVisiable"
      :show-close="false"
      @close="closeDialog">
      <div class="row-wrapper payCode-title" slot="title">
        <div @click="closeDialog">
          <img src="../../../../assets/static/addReceiverAccount/back.png" alt=""/>
        </div>
        <span>{{ $t('home.Setpaymentpassword') }}</span>
        <div></div>
      </div>
      <div class="card_code ">
        <div class="inputHeight row-wrapper" v-for="(item,index) in password" :key="index">
          <input
            style="-webkit-text-security:disc;text-security:disc;"
            type="tel"
            @focus="inputFocus"
            @keydown.delete="e=>{verifyDel(e,index)}"
            ref="input"
            @input="beInput(index)"
            v-model="password[index]"/>
        </div>
      </div>
      <!--      <div class="row-wrapper save">-->
      <!--        <Button @click="submitPassword" type="primary">确定</Button>-->
      <!--      </div>-->
    </Dialog>
  </div>
</template>

<script>
import {add, transferfriend, getuserid} from '@/api/merbership/transfer'
import '@/styles/elInput.scss'
import '@/styles/flax.css'
import {yz_pay_password} from '@/api/merbership/user'
import {myInfo} from '@/api/merbership/my'

export default {
  data() {
    return {
      loading: false,
      form: {
        user_id: '',
        money: '',
        type: '',
        user_bank_id: '',
        remark: '',
      },
      mobile: '',
      uid: '',
      selectOption: [
        {
          'user_id': '3',
          'ROW_NUMBER': '1',
          'udata': {
            'id': '3',
            'head': '',
            'nickname': 'xczcz',
            'grade_id': '1',
            'mobile': '15555555555',
            'balance': '10.00',
            'score': '0',
            'status': '1',
            'create_time': '1635327576',
            'email': '',
            'address': '',
            'ROW_NUMBER': '1'
          }
        }],
      //   ------- 支付密码 --------------
      payDialogVisiable: false,
      password: ['', '', '', '', '', ''],
      passwordRepet: ['', '', '', '', '', ''],
      passwordStr: '',
      deleteStatus: false,
      handsSetPayPassword: false
    }
  },
  activated() {
    this.myInfo()
    // this.transferfriend()
  },
  methods: {
    mobileBeInput() {
      this.mobile = this.mobile.replace(/\s/g, '')
      // 防止输入数字以外的字符
      if (isNaN(Number(this.mobile))) {
        this.mobile = this.mobile.replace(/[^\d]/g, '')
        return ''
      }
    },
    /**
     * 手机号输入完毕
     */
    mobileChange() {
      this.getuserid()
    },
    /**
     * 限制金钱必须为数字
     * @returns {string}
     */
    moneyBeInput() {
      this.form.money = this.form.money.replace(/\s/g, '')
      // 防止输入数字以外的字符
      if (isNaN(Number(this.form.money))) {
        this.form.money = this.form.money.replace(/[^\d]/g, '')
        return ''
      }
    },
    /**
     * 获取焦点时
     */
    inputFocus() {
      // 解决密码框输满之后的失效问题 (没有input[6])
      if (this.passwordStr.length >= 6) {
        this.$refs.input[5].focus()
        return ''
      }
      // 控制焦点在未输入的第一个密码框内 为了不干扰delete 判断是否是delete操作
      if (!this.deleteStatus) {
        this.$refs.input[this.passwordStr.length].focus()
      }
    },
    /**
     * 支付弹窗打开后
     */
    opened() {
      this.$refs.input[0].focus()
    },
    /**
     * 关闭弹窗
     */
    closeDialog() {
      this.payDialogVisiable = false
      this.password = ['', '', '', '', '', '']
      this.passwordStr = ''
    },
    /**
     * 输入框被点击
     */
    inputOnFocus() {
      // console.log(index)
      // this.$refs.input[0].focus()
    },
    /**
     * 提交密码
     */
    submitPassword() {
      if (this.passwordStr.length < 6) {
        this.$message.error('请输入完整支付密码')
      } else {
        // this.add()
        this.yz_pay_password()
      }
    },
    /**
     * 删除
     * @param e
     * @param index
     */
    verifyDel(e, index) {
      // 标识当前操作为删除
      this.deleteStatus = true
      this.passwordStr = this.password.join('')
      if (index > 0) {
        this.password[index] = null
        this.$refs.input[index - 1].focus()
      }
    },
    /**
     * 输入
     * @param index
     */
    beInput(index) {
      // 标识操作为非删除
      this.deleteStatus = false
      this.password[index] = this.password[index].replace(/\s/g, '')
      // 防止输入数字以外的字符
      if (isNaN(Number(this.password[index]))) {
        this.password[index] = this.password[index].replace(/[^\d]/g, '')
        return ''
      }
      // 组合密码 大于6位后停止组合
      if (this.passwordStr.length <= 6) {
        this.passwordStr = this.password.join('')
      }
      if (this.passwordStr.length > 6) {
        this.passwordStr = this.passwordStr.slice(0, 6)
      }
      // 防止输入位数过多 index为5时 verifyStr为6位
      if (index > 5) {
        return ''
      }
      if (this.passwordStr.length >= 6) {
        this.$refs.input[5].focus()
        for (let i = 0; i < 6; i++) {
          if (isNaN(Number(this.passwordStr[i]))) {
            continue
          }
          this.password[i] = this.passwordStr[i]
        }
        return ''
      }
      if (index < this.password.length) {
        if (this.password[index].length >= 1) {
          this.$refs.input[this.passwordStr.length].focus()
          for (let i = 0; i < this.passwordStr.length; i++) {
            if (isNaN(Number(this.passwordStr[i]))) {
              continue
            }
            this.password[i] = this.passwordStr[i]
          }
        }
      }
    },
    /**
     * 输入支付密码
     */
    openPayDialog() {
      if (this.handsSetPayPassword) {
        this.payDialogVisiable = true
      } else {
        this.$alert('是否去设置', '未设置支付密码', {
          confirmButtonText: '确定',
          callback: () => {
            this.$router.push({path: '/listPayPassword'})
          }
        })
      }
    },
    // ------------------ axios ---------------------
    /**
     * 判断是否设置了支付密码
     */
    myInfo() {
      const pd = {}
      myInfo(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            console.log(res.data.data.pay_password)
            this.handsSetPayPassword = !(res.data.data.pay_password === '')
          }
        })
    },
    /**
     * 验证支付密码
     */
    yz_pay_password() {
      const pd = {
        pay_password: this.passwordStr
      }
      this.loading = true
      yz_pay_password(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            // this.$message.success(res.data.msg)
            this.add()
            this.payDialogVisiable = false
          } else {
            this.loading = false
            this.$message.error(res.data.msg)
          }
        })
        .catch(err => {
          this.loading = false
          console.error(err)
        })
    },
    /**
     * 根据手机号查询uid
     */
    getuserid() {
      const pd = {
        mobile: this.mobile
      }
      getuserid(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            this.form.user_id = res.data.data
          } else {
            this.$message.error(res.data.msg)
            this.mobile = undefined
          }
        })
    },
    /**
     * 添加对方账户信息
     */
    add() {
      add(this.$qs.stringify(this.form))
        .then(res => {
          this.loading = false
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            this.payDialogVisiable = false
            this.password = ['', '', '', '', '', '']
            this.$router.go(-1)
          }
        })
    },
    /**
     * 转账好友
     */
    transferfriend() {
      const pd = {}
      transferfriend(this.$qs.stringify(pd))
        .then(res => {
          // this.$message.success(res.data.msg)
          this.selectOption = res.data.data.data
        })
    }
  },
  watch: {
    passwordStr(val) {
      if (val.length >= 6) {
        this.submitPassword()
      }
    }
  }
}
</script>
<style>
.payDialog {
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  border-radius: 15px 15px 0 0;
}

.el-message-box {
  width: 80vw;
}
</style>
<style lang="scss" scoped>
.inputHeight {
  height: 45px;
}

.save {
  margin-top: 10px;
  justify-content: center;
}

input {
  outline: none;
  border-color: transparent;
}

.box {
  background-color: #F5F5F5;
  height: 100vh;
}

/* 标题 */
.title {
  background-image: linear-gradient(to bottom, #7ac91b 65%, #f5f5f5 0);
  font-weight: bold;
}

.title .title_fan {
  color: #fff;
  font-size: 14px;
  padding: 15px;
}

.title_cen {
  margin: 0 5%;
  padding: 15px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 10px #ccc;
  color: #333333;
}

/* card 标题 */
.card_title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}

.card_title div {
  margin-left: 13px;
}

/* 对方账户 */
.account {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*padding: 0 12px 0 12px;*/
  box-shadow: 0 1px 10px #ccc;
  border-radius: 10px;
  margin: 10px 0;
  color: #66C107;
  font-size: 12px;
}

.account img {
  width: 13px;
}

/*  骂你 */
.money {
  font-size: 14px;
  font-weight: bold;
}

/*.money > div {*/
/*  */
/*}*/

.money > span {
  font-weight: normal;
  color: #6AC30C;
}

.title_input {
  margin: 10px 0;
}

/*  */
.ensure {
  margin: 55px;
  background-image: linear-gradient(to right, #FED000, #FFB200);
  text-align: center;
  padding: 15px;
  color: #fff;
  border-radius: 10px;
}

.payCode-title > span {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.payCode-title {
  justify-content: space-between;
}

.payCode-title > div > img {
  width: 8.5px;
  height: 14.5px;
}

.card_code {
  display: flex;

  > div {
    width: 57.5px;
    //height: 45px;
    padding: 5px;
    background: #FFFFFF;
    border: 1px solid #CBCBCB;
    //border-radius: 10px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    justify-content: center;
  }

  > div:nth-child(1) {
    border-radius: 8px 0 0 8px;
  }

  > div:nth-child(6) {
    border-radius: 0 8px 8px 0;
  }


  input {
    text-align: center;
    width: 20px;
    font-size: 15px;
    font-weight: bold;
    border: none;
    outline: none;
  }
}

</style>
